<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      background-color: #f5f5f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
      color: #333;
    }

    h1 {
      color: #5c6ef8;
      margin-bottom: 0.3rem;
    }

    .todo-app {
      background: #fff;
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 90%;
      max-width: 500px;
    }

    .input-area {
      display: flex;
      gap: 10px;
      margin-bottom: 1rem;
    }

    input[type="text"] {
      flex: 1;
      padding: 0.6rem 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 1rem;
    }

    button {
      background-color: #5c6ef8;
      color: #fff;
      border: none;
      padding: 0.6rem 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #4656d8;
    }

    .filter {
      display: flex;
      gap: 10px;
      margin-bottom: 1rem;
      justify-content: center;
    }

    .filter button.active {
      background-color: #5c6ef8;
      color: white;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      background: #fafafa;
      padding: 0.8rem 1rem;
      border-radius: 8px;
      margin-bottom: 0.6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
    }

    li.completed {
      text-decoration: line-through;
      color: #aaa;
      background: #e8e8e8;
    }

    .delete-btn {
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      font-size: 1.2rem;
    }

    .delete-btn:hover {
      color: #ff4c4c;
    }

    .fade-in {
      opacity: 0;
      transform: translateY(10px);
      animation: fadeIn 0.3s forwards;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 480px) {
      h1 {
        font-size: 1.4rem;
      }
      button {
        padding: 0.5rem;
        font-size: 0.9rem;
      }
    }
  </style>
</head>
<body>
  <h1>待办事项</h1>
  <p>简单高效地管理你的任务</p>
  <div class="todo-app">
    <div class="input-area">
      <input type="text" id="todo-input" placeholder="添加新的待办事项..." />
      <button id="add-btn">添加</button>
    </div>
    <div class="filter">
      <button class="filter-btn active" data-filter="all">全部</button>
      <button class="filter-btn" data-filter="active">未完成</button>
      <button class="filter-btn" data-filter="completed">已完成</button>
    </div>
    <ul id="todo-list"></ul>
  </div>

  <script>
    class TodoApp {
      constructor() {
        this.todos = JSON.parse(localStorage.getItem('todos')) || [];
        this.filter = 'all';
        this.listElement = document.getElementById('todo-list');
        this.inputElement = document.getElementById('todo-input');
        this.init();
      }

      init() {
        this.render();
        document.getElementById('add-btn').addEventListener('click', () => this.addTodo());
        this.inputElement.addEventListener('keypress', e => {
          if (e.key === 'Enter') this.addTodo();
        });

        document.querySelectorAll('.filter-btn').forEach(btn => {
          btn.addEventListener('click', e => {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
            this.filter = e.target.dataset.filter;
            this.render();
          });
        });
      }

      addTodo() {
        const text = this.inputElement.value.trim();
        if (!text) return;
        this.todos.push({ id: Date.now(), text, completed: false });
        this.save();
        this.inputElement.value = '';
        this.render();
      }

      toggleTodo(id) {
        this.todos = this.todos.map(todo => 
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        );
        this.save();
        this.render();
      }

      deleteTodo(id) {
        this.todos = this.todos.filter(todo => todo.id !== id);
        this.save();
        this.render();
      }

      save() {
        localStorage.setItem('todos', JSON.stringify(this.todos));
      }

      render() {
        this.listElement.innerHTML = '';
        const filteredTodos = this.todos.filter(todo => {
          if (this.filter === 'active') return !todo.completed;
          if (this.filter === 'completed') return todo.completed;
          return true;
        });

        filteredTodos.forEach(todo => {
          const li = document.createElement('li');
          li.classList.add('fade-in');
          if (todo.completed) li.classList.add('completed');

          li.innerHTML = `
            <span>${todo.text}</span>
            <div>
              <input type="checkbox" ${todo.completed ? 'checked' : ''} />
              <button class="delete-btn">🗑️</button>
            </div>
          `;

          li.querySelector('input').addEventListener('change', () => this.toggleTodo(todo.id));
          li.querySelector('.delete-btn').addEventListener('click', () => this.deleteTodo(todo.id));

          this.listElement.appendChild(li);
        });
      }
    }

    new TodoApp();
  </script>
</body>
</html>
